<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueComponent</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<!--
      VueComponent 实例是在虚拟 DOM 生成真实 DOM 时被创建的，而不是解析模板时创建的。
        用钩子函数 beforeMount 和 mounted 加上 debugger 能够测试出来
    -->

<!--
    关于VueComponent：
        1.school组件本质就是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

        2.我们只需要写<school/>或<school></>school>,Vue解析时会帮我们创建school组件实例对象，
         即Vue帮我们执行的： new VueComponent（options）。

        3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！

        4.关于this的指向：
                （1）.组件配置中：
                      data函数，methods中的函数，watch中的函数，computed中的函数 它们的this均是【VueComponent实例对象】
                （2）.new Vue（options）配置中：
                      data函数，methods中的函数，watch中的函数，computed中的函数 它们的this均是【Vue实例对象】

        5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
          Vue实例对象简称vm

          说白了就是类层级的工厂模式，只是产品由对象变成了用来生成对象的构造函数
          个人理解，vue.extend的作用是类生成器。每次调用都返回一个新类的构造方法。
-->

<body>
<!-- 准备好 一个容器-->
<div id="root">
   <school></school>
  <hello/>
</div>

</body>


<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //school组件
  const school = Vue.extend({
    template:'<div>' +
            '<h2>学校名称: {{name}}</h2>' +
            '<h2>学校地址: {{address}}</h2>' +
            '</div>',
    //注册在哪里的组件就在谁的结构里写标签
    data(){
      return{
        name:'hfuu',
        address:'繁华大道'
      }
    }
  })

  const test = Vue.extend({
    template:'<span>test</span>'
  })

  //hello组件
  const hello = Vue.extend({
    template:'<div>' +
            '<h2> {{msg}}</h2>' +
            '<test></test>' +
            '</div>',
    data(){
      return{
        msg:'您好'
      }
    },
    components:{
      test
    }
  })


  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    components: {
      school,
      hello
    }
  })

</script>

</html>
